<template>
  <div>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
      <!-- 上拉加载 -->
      <van-list
        class="index"
        v-model="loading"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, idx) in list"
          :key="idx"
          @click="$router.push('/article/' + item.art_id.toString())"
          :title="item.title"
        >
          <!-- van-cell有一个名为label的插槽，用来设置标题正下方的内容 -->
          <div slot="label">
            <!-- 图文.... -->
            <!-- 图片 van-grid
            当前文章有几张图，就用几个宫格
            -->
            <van-grid :column-num="item.cover.images.length">
              <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx">
                <van-image lazy-load :src="img" />
              </van-grid-item>
            </van-grid>

            <!-- 文字说明 -->
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | rTime }}</span>
              <!-- 子传父  -->
              <span
                class="close"
                @click.stop="moreAction(item)"
                v-if="$store.state.tokenInfo.token"
              >
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { article } from "@/api/article.js";
export default {
  name: "ArticleList",
  props: {
    channel: {
      type: Object
    }
  },
  data() {
    return {
      list: [],
      error: false,
      loading: false, // 是否上拉加载
      timestamp: null,
      isLoadingNew: false // 是否下拉刷新加载更多
    };
  },
  //创建组件完成  会自动调用created
  created() {
    //监听$on  home/index.vue 传过来的事件 delArticle
    //如果收到事件，则执行删除操作  在回调函数中接收参数
    this.$eventBus.$on("delArticle", obj => {
      //   console.log(this);注意这里用的是箭头函数，否则this指向有问题
      //1.取数据 es6解构
      const { channelId, articleIdClose } = obj;
      //   console.log(channelId, articleIdClose);
      //实现删除文章的操作  从list中删除指定id的文章
      //1.判断是不是这个频道
      //   console.log(this.channel.id);//Number类型
      if (this.channel.id !== channelId) {
        return;
      }
      //2.如果是 就找文章id
      const list = this.list;
      //对应的文章下标
      const idx = list.findIndex(item => {
        // item.art_id 是number类型
        return item.art_id.toString() === articleIdClose; //注意这里是=== 注意数据类型
      });
      //   console.log(idx);
      //3.如果找到就删掉  找不到就是 -1
      if (idx !== -1) {
        list.splice(idx, 1); //通过修改本地数据来渲染页面，而不是重新调用接口，性能优化
      }
      this.$toast("删除成功");
    });
  },
  methods: {
    //点击关闭按钮的函数，收到一个对象，里面存储文章相关属性
    moreAction(obj) {
      console.log(obj.art_id, "文章id");
      //子传父 触发绑定给它自己的自定义事件(在父组件的子组件中定义的)
      // 向父级件index.vue抛出一个事件。 当父组件收到时这个事件时，去把弹层打开。
      // 传递当前的文章编号
      // 由于这里的文章编号可能是经过大数处理之后的对象，所以这里要加toString
      this.$emit("moreActionBtn", obj.art_id.toString());
    },
    /**- 如果当前的内容不够一屏，它会自动调用 onLoad 去加载数据。
- `List`有以下三种状态，理解这些状态有助于你正确地使用`List`组件：
- 非加载中，`loading`为`false`，此时会根据列表滚动位置判断是否触发`load`事件（列表内容不足一屏幕时，会直接触发）
- 加载中，`loading`为`true`，表示正在发送异步请求，此时不会触发`load`事件
- 加载完成，`finished`为`true`，此时不会触发`load`事件
在每次请求完毕后，需要手动将`loading`设置为`false`，表示加载结束
**/
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      //   setTimeout(() => {
      //     for (let i = 0; i < 10; i++) {
      //       this.list.push(this.list.length + 1);
      //     }

      //     // 加载状态结束
      //     this.loading = false;

      //     // 数据全部加载完成
      //     if (this.list.length >= 40) {
      //       this.finished = true;
      //     }
      //   }, 1000);
      //判读this.timestamp是否存在
      //如果不存在 使用 Date.now()
      //如果存在，使用 this.timestamp
      //   if (!this.timestamp) {
      //     this.timestamp =Date.now() ;
      //   }
      this.getArticle({
        channel_id: this.channel.id,
        timestamp: this.timestamp ? this.timestamp : Date.now()
      });
    },
    //获取文章列表
    async getArticle(obj) {
      try {
        const res = await article(obj);
        console.log(res);
        //首先判断我们请求到的数据是否为空 如果是空的，则不执行后面的代码
        if (res.data.data.results.length === 0) {
          this.finished = true;
          return;
        }
        //新增 获取时间戳
        this.timestamp = res.data.data.pre_timestamp;
        //推进数据
        this.list.push(...res.data.data.results); //解构数组
        // 2.调用完加载的状态
        this.loading = false;
      } catch (error) {
        // console.log(error);
        this.finished = true;
      }
    },
    //下拉刷新
    async onRefresh() {
      try {
        // 发请求 取回最新的数据
        const res = await article({
          channel_id: this.channel.id,
          timestamp: Date.now()
        });
        //获取数据
        const arr = res.data.data.results;
        // 把数据添加到list中  添加到list的开头!
        this.list.unshift(...arr);
        // 更新下拉刷新的状态
        this.isLoadingNew = false; //这个一定要改为false才能再次刷新
        // 提示
        this.$toast.success("刷新成功");
      } catch (error) {
        //请求失败
        console.log(error);
        this.$toast.fail("刷新失败");
        this.isLoadingNew = false;
      }
    }
  }
};
</script>
<style lang="less">
.meta {
  span {
    margin-right: 10px;
  }
}
.close {
  float: right;
  max-width: 3px 5px 0 0;
}
</style>
